<template>
  <div class="content_top">
    <p class="p1">卫星信号态势分析平台</p>
    <p class="p2">Welcome to signal analyse platform</p>
  </div>
  <a-row class="crow1">
      <a-col :span="8">
        <a-row :gutter="[16,16]">
          <a-col :span="12">
            <div class="cbox1">
              <div class="spanc1">930</div>
              <div class="spanc2">所有载波</div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="cbox2">
              <div class="spanc1">122</div>
              <div class="spanc2">正在处理</div>
            </div>
          </a-col>
        </a-row>
        <a-row  :gutter="[16,16]">
          <a-col :span="12">
            <div class="cbox3">
              <div class="spanc1">432</div>
              <div class="spanc2">澄清载波</div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="cbox4">
              <div class="spanc1">129</div>
              <div class="spanc2">待处理</div>
            </div>
          </a-col>
        </a-row>
        <a-row  :gutter="[16,16]">
          <a-col :span="24">
            <div class="cbox8">
              <graph2></graph2>
            </div>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="16">
        <a-row  :gutter="[16,16]">
          <div class="cbox9">
            <graph></graph>
          </div>
        </a-row>
      </a-col>
    </a-row>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import graph from './charts/graph.vue'
import graph2 from './charts/graph2.vue'
export default defineComponent({
name: 'carrier',
components: { graph,graph2},
setup() {
  // series: [
  //       {
  //           type: 'graph',
  //           layout: 'force',
  //           data: [
  //               {name: '节点1', value: 10, symbolSize: 20, symbol: 'rect'},
  //               {name: '节点2', value: 20, symbolSize: 30, symbol: 'circle'},
  //               // 更多节点...
  //           ],
  //           edges: [
  //               {source: '节点1', target: '节点2'},
  //               // 更多边...
  //           ]
  //       }
  //   ]
  return {  }
},
})
</script>
<style scoped lang=less>
.content_top{
  width: 1766px;
  height: 100px;
  background:#F6F8F8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .p1{
    color:#000 !important;
    font-size: 30px;
    margin-bottom: 0;
    margin-left: 5px;
  }
  .p2{
    font-size: 15px;
    color: #ccc;
    margin-top: -10px;
    margin-left: 15px;
  }
}
.crow1{
  margin-top: 20px;
}
  .cbox1{
    width: 100%;
    height: 90px;
    margin-bottom: 20px;
    padding-top: 5px;
    text-align: center;
    background: #fff;
    .spanc1{
      font-size: 30px;
      color: #5bbbe7;
    }
    .spanc2{
      font-size: 14px;
      color: #9ba6ac;
    }
  }
  .cbox2{
    width: 100%;
    height: 90px;
    margin-bottom: 20px;
    padding-top: 5px;
    text-align: center;
    background: #7066b5;
    .spanc1{
      font-size: 30px;
      color: #fff;
    }
    .spanc2{
      font-size: 14px;
      color: #d5d3e4;
    }
  }
  .cbox3{
    width: 100%;
    height: 90px;
    margin-bottom: 20px;
    padding-top: 5px;
    text-align: center;
    background: #58b4e0;
    .spanc1{
      font-size: 30px;
      color: #fff;
    }
    .spanc2{
      font-size: 14px;
      color: #bae0ef;
    }
  }
  .cbox4{
    width: 100%;
    height: 90px;
    margin-bottom: 20px;
    padding-top: 5px;
    text-align: center;
    background: #fff;
    .spanc1{
      font-size: 30px;
      color: #5b666d;
    }
    .spanc2{
      font-size: 14px;
      color: #9ba6ac;
    }
  }
  .cbox8{
    width: 100%;
    height: 380px;
    background: #fff;
  }
  .cbox9{
    width: 100%;
    height: 600px;
    margin-left: 25px;
    background: #fff;
  }

</style>